import React, { useEffect, useState, useRef } from 'react';
import { Tag } from 'antd';
import useAdminPermission from '@/components/_hooks/useAdminPermission';
import useReceiveModal from '@/components/_hooks/useReceiveModal';
import { receiveMapping } from '@/utils';
import { QueryTable } from "@/components/QueryTable";
/**
 * 接单设置
 */
export default function ReceiveSetting() {
  const tableRef = useRef()
  const isAdmin = useAdminPermission()
  const [openReceiveModal, receiveModal] = useReceiveModal({ callback: () => { tableRef?.current?.refreshTable() } })

  const columns = [
    {
      dataIndex: "realName",
      key: "realName",
      title: "姓名",
      searchConfig: {
        type: 'input',
      },
    },
    {
      dataIndex: "phone",
      key: "phone",
      title: "电话",
    },
    {
      dataIndex: "receivePriority",
      key: "receivePriority",
      title: "优先级",
    },
    {
      dataIndex: "receiveStatus",
      key: "receiveStatus",
      title: "接单状态",
      render: (_, record) => {
        const statusObj = receiveMapping[record?.receiveStatus] ?? {}
        return (
          <Tag color={statusObj?.color}>{statusObj?.content}</Tag>
        );
      },
    },
    {
      dataIndex: "action",
      key: "action",
      title: "操作",
      render: (_, record) => {
        if (!isAdmin) return '--'
        return (
          <>
            <a onClick={() => openReceiveModal(record)}>
              编辑
            </a>
          </>

        )
      }
    }
  ];
  return (
    <>
      <QueryTable
        ref={tableRef}
        columns={columns}
        pagingInServer
        requestUrl="/crm/employee/receiveOrdersConfig/page"
        responseDatafield="data"
      />
      {receiveModal}
    </>

  );
}

ReceiveSetting.route = {
  [MENU_PATH]: "/operate/receive",
};
